<template>
	<div class="page">
		<c-title :hide="false" text="易货分类"></c-title>
		<div class="mdxx">
			<div class="left_img">
				<img :src="thumb" alt="">
			</div>
			<div class="r_name">
				{{store_name}}
			</div>
		</div>
		<!-- <div class="search">
			<div>
				<div class="back" @click="goback">
					<i class="fa fa-angle-left"></i>
				</div>
			</div>
			<div class="searchBox">
				<form @submit.prevent action="#">
					<input type="search" @keypress="enterSearch" placeholder="搜索当前分类商品" v-model="inputs"
						@click="show1 = true" />
				</form>
			</div>
			<div class="search_icon">
				<i class="iconfont icon-sousuo1"></i>
			</div>
			<div class="search_bth" @click="search">
				<span>搜索</span>
			</div>
	
		</div> -->
		<div class="box">
			<div class="l">
				<div class="yjflcon">
					<div :class=" item.cli==1?'yjfllistcli':'yjfllist' " v-for="(item,index) in yjfllist" :key="index"
						@click="yjcli(item)">
						{{item.name}}
					</div>
				</div>
			</div>
			<div class="content">
				<div class="ejcontent" ref="ejcontent">
					<div class="list" v-for="(item,index) in rjfllist" :key="index" @click="gotoDetail(item.id)">
						<div class="top_img">
							<img :src="item.business_pic" alt="">
						</div>
						<div class="conbot">
							<div class="name">
								{{item.name}}
							</div>
							<!-- <div class="price">
								￥{{item.price}}
							</div> -->
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {

			return {
				postUrl: 'plugin.store-yihuo.frontend.store.yihuo.get-goods-list',
				inputs: '',
				yjfllist: [],
				rjfllist: [],
				isLoad: true,
				msg: "正在加载",
				page: 1,
				parent_id: '',
				category_id:'',
				thumb:'',
				store_name:''
			}
		},
		activated() {
			this.parent_id = this.$route.params.store_id
			this.store_id = this.$route.params.store_id
			this.thumb = this.$route.params.thumb
			this.store_name = this.$route.params.store_name
			this.getyjfl()
			let that = this
			setTimeout(function(){
				that.getejfl()
			},300)
			window.addEventListener("scroll", this.onScroll);
		},
		mounted() {
			//开启滚动事件
			window.addEventListener("scroll", this.onScroll);
		},
		// destroyed() {
		// 	//关闭滚动事件
		// 	window.removeEventListener("scroll", (this.onScroll));
		// },
		// activated() {
		// 	//开启滚动事件
		// 	window.addEventListener("scroll", this.onScroll);
		// },
		deactivated() {
			//关闭滚动事件
			window.removeEventListener("scroll", (this.onScroll));
		},
		computed: {
			...mapState(['message', 'blurst', 'view']),

			zoneId() {
				if (this.$store.state.zoneId == '') {
					this.$store.commit('setZoneId', window.localStorage.getItem('zoneId'));
				}

				return this.$store.state.zoneId;
			}
		},
		methods: {
			//跳转至详情
			gotoDetail(id) {
				this.$router.push(this.fun.getUrl("newyhdetail",{},{id}));

			},
			onScroll() {
				//可滚动容器的高度
				let innerHeight = this.$refs.ejcontent.clientHeight;
				//屏幕尺寸高度
				let outerHeight = document.documentElement.clientHeight;
				//可滚动容器超出当前窗口显示范围的高度
				let scrollTop = document.documentElement.scrollTop;
				//避免切换时读取到异常高度
				if (scrollTop == 5) {
					innerHeight = 10000
				}
				//scrollTop在页面为滚动时为0，开始滚动后，慢慢增加，滚动到页面底部时，出现innerHeight < (outerHeight + scrollTop)的情况，严格来讲，是接近底部。
				if (this.isLoad) {
					console.log(1)
					if (innerHeight <= outerHeight + scrollTop) {
						//此处添加自定义操作
						this.page++
						$http
							.get("plugin.store-yihuo.frontend.store.yihuo.get-goods-list", {
								category_id: this.category_id,
								goods_page: this.page,
								store_id:this.store_id
							})
							.then(res => {
								console.log(res)
								if (res.result == 1) {
									if (res.data.list != 0) {
										this.rjfllist = [...this.rjfllist, ...res.data.list]
									} else {
										Toast('没有更多了')
									}
									console.log(this.rjfllist)
								} else {
						
								}
							});
						console.log(11)
					}
				}
			},
			yjcli(item) {
				this.yjfllist.forEach(it => {
					it.cli = 0
				})
				item.cli = 1
				this.parent_id = item.id
				this.page = 1
				this.rjfllist = []
				this.getejfl()
			},
			getejfl() {
				$http
					.get("plugin.store-yihuo.frontend.store.yihuo.get-goods-list", {
						category_id: this.category_id,
						goods_page: this.page,
						store_id:this.store_id
					})
					.then(res => {
						console.log(res)
						if (res.result == 1) {
							if (res.data.list != 0) {
								this.rjfllist = res.data.list
							} else {
								Toast('没有更多了')
							}
							console.log(this.rjfllist)
						} else {

						}
					});
			},
			getyjfl() {
				$http
					.get("plugin.store-yihuo.frontend.store.yihuo.get-category-by-storeId", {
						store_id: this.store_id
					})
					.then(res => {
						console.log(res)
						if (res.result === 1) {
							this.yjfllist = res.data.list
							this.category_id  = res.data.list[0].id
							this.yjfllist.forEach(item => {
								this.$set(item, 'cli', 0)
							})
							console.log(this.yjfllist)
						} else {

						}
					});
			},
			enterSearch(event) {
				if (event.keyCode === 13) {
					//如果按的是enter键
					event.preventDefault();
					this.search();
				}
			},
			search() {
				this.rjfllist = [];
				this.gotoSearch(1, false);
			},
			gotoSearch(page = 1, j = true) {
				let srtArr = JSON.parse(this.$route.params.id);

				let json = {
					'search[keyword]': this.inputs,
					page: page,
					'search[category]': this.parent_id,
					// order_field: this.order_field,
					// order_by: this.order_by,
					'search[couponid]': this.$route.params.coupon,
					'search[as_id]': this.zoneId,
					category_id: this.parent_id
				};

				if (this.$route.params.type && this.$route.params.type == 'snatchRegiment') {
					//抢团分类聚合页
					json.art = 'catGoods';
				}
				$http.get(this.postUrl, json, '.').then(
					response => {
						console.log(response)
						if (response.result === 1) {

							if (this.$route.params.type && this.$route.params.type == 'snatchRegiment') {
								this.total_page = response.data.catGoods.goods.last_page;
							} else {
								this.total_page = response.data.last_page;
							}

							if (!this.total_page) {
								this.total_page = 0;
							}
							if (this.$route.params.type && this.$route.params.type == 'snatchRegiment') {
								this.datas.push(...response.data.catGoods.goods.data);
							} else {
								this.rjfllist.push(...response.data.data);
							}
							// 搜索结果为空
							if (this.datas.length <= 0) {
								this.loading = true;
								this.allLoaded = true;
								return;
							}
							// 如果当前页数大于总页数 就不加载了
							// if (response.data.current_page > response.data.last_page) {
							//   this.loading = true;
							//   this.allLoaded = true;
							//   return;
							// }

							this.goods_template = response.data.goods_template;

							// if (response.data.data.length < 20) {
							//   this.loading = true;
							//   this.allLoaded = true;
							//   return;
							// }
							this.isLoading = false;
						} else {
							this.isLoading = false;
							console.log(response);
						}
					});
			},
			goback() {
				localStorage.setItem('isset', 1);
				if (window.history.length <= 1) {
					this.$router.push(this.fun.getUrl('home', {}));
				} else {
					this.$router.go(-1);
				}
			},
		}
	}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
	.mdxx{
		display: flex;
		background-color: #fff;
		padding: 0.5rem;
		.r_name{
			font-weight: 600;
			line-height: 4rem;
		}
		.left_img{
			margin-right: 1rem;
			img{
				width: 5rem;
				height: 5rem;
			}
		}
	}
	.box {
		display: flex;
		
		.content {
			width: 100%;

			.ejcontent {

				display: flex;
				flex-wrap: wrap;
				padding-left: 7.5rem;
				// padding-top: 3.5rem;
				justify-content: space-between;

				.list {
					width: 48%;
					margin-bottom: 1rem;

					.conbot {
						padding: 0.4rem;
						background-color: #fff;
						display: flex;
						text-align: left;
						flex-direction: column;
						justify-content: space-between;
						background-color: #fff;
						// height: 7.5rem;

						.price {
							color: #f00;
							margin-top: 1rem;
						}

						.name {}
					}

					.top_img {
						img {
							width: 100%;
							height: 6rem;
						}
					}
				}
			}
		}

		.l {
			position: fixed;
			left: 0;
			background-color: #fff;
			height: 100%;
			text-align: center;
			width: 30%;
			top: 7rem;

			.yjflcon {
				.yjfllistcli {
					line-height: 3rem;
					color: #000;
					border-left: 0.1rem solid #f00;
				}

				.yjfllist {
					line-height: 3rem;
					color: #999;
				}
			}
		}
	}

	// 弹窗样式
	#search {
		.showmoretype {
			height: 5.5rem !important;
		}

		.icon {
			display: inline-block;
			width: 0.5rem;
			height: 0.5rem;
			border: solid 0.0625rem #000;
			border-left: transparent;
			border-bottom: transparent;
			transform: rotate(135deg);
			margin-left: 0.1875rem;
			position: relative;
			top: -0.125rem;
		}

		.color {
			border: solid 0.0625rem #ff5e53;
			background: #fff !important;
			color: #ff5e53;
		}

		.btn {
			width: 23%;
			height: 26px;
			border: solid 0.0625rem #fff;
			border-radius: 0.25rem;
			margin: 0 0.3125rem;
		}

		.top-tab {
			padding: 0 0.875rem;
			display: flex;
			justify-content: space-between;
			height: 2.8125rem;
			line-height: 2.8125rem;

			.search-text {
				font-size: 14px;
			}

			.search-box {
				margin: 0 1rem;
				padding: 0 1rem;
				display: flex;
				justify-content: space-between;
				margin-top: 0.5rem;
				height: 1.875rem;
				background-color: #f2f2f2;
				border-radius: 0.9375rem;
				flex: 2;

				input {
					flex: 3;
					border: none;
					color: #8c8c8c;
				}

				i {
					line-height: 1.875rem;
				}
			}
		}

		.age {
			.select {
				color: rgb(255, 94, 83);
			}

			text-align: left;

			li {
				height: 2.75rem;
				line-height: 2.75rem;
				border-bottom: solid 0.0625rem #e2e2e2;
				padding: 0 0.875rem;
				font-size: 14px;
			}
		}

		.middle {
			padding: 0.625rem 0;
			border-bottom: solid 0.0625rem #e2e2e2;

			ul {
				display: flex;
				justify-content: space-between;
				padding: 0 0.875rem;
				line-height: 2.25rem;
				height: 2.25rem;

				span {
					color: #8c8c8c;
				}

				i {
					font-size: 18px;
					color: #c9c9c9;
					margin-left: 0.375rem;
				}
			}

			.button {
				padding: 0 0.875rem;

				.first,
				.second {
					display: flex;
					margin-top: 0.625rem;
					margin-bottom: 0.625rem;

					button:first-child {
						margin-right: 0.3125rem;
					}

					button:last-child {
						margin-left: 0.3125rem;
					}

					button:nth-child(2),
					button:nth-child(3) {
						margin: 0 0.3125rem;
					}

					button {
						width: 23%;
						height: 1.625rem;
						border: solid 0.0625rem #e2e2e2;
						border-radius: 0.25rem;
					}
				}
			}
		}

		.bottom {
			padding: 0 0.875rem;
			margin-top: 0.625rem;
			margin-bottom: 0.625rem;

			.button {
				display: flex;
				justify-content: flex-end;

				button {
					width: 23%;
					height: 1.625rem;
					border: solid 0.0625rem #e2e2e2;
					border-radius: 0.25rem;
				}

				button:first-child {
					margin-right: 0.3125rem;
				}

				button:last-child {
					margin-left: 0.3125rem;
				}

				#complete {
					background-color: #ff5e53;
					color: #fff;
					border: none;
				}
			}
		}

		.brand {
			.hot {
				h1 {
					height: 1.875rem;
					line-height: 1.875rem;
					text-align: left;
					padding: 0 0.875rem;
					font-size: 14px;
					background-color: #f5f5f5;
					color: #8c8c8c;
					margin-bottom: 0.625rem;
				}

				ul {
					display: flex;
					flex-wrap: wrap;

					li {
						width: 25%;
						margin: 0.625rem 0;

						span {
							font-size: 12px;
						}
					}
				}
			}
		}
	}

	// 弹窗样式结束
	#search {
		.osll {
			min-height: 100vh;
			margin-top: 1.75rem;
			box-sizing: border-box;
		}

		// 	@descendent wrapper {
		//     overflow: scroll;
		// }
		.page-loadmore-wrapper2 {
			height: 100vh;
			overflow: hidden;
		}

		.uou {
			position: fixed;
			z-index: 99;
			top: 0;
			transition: 0.2s;
			-webkit-transition: 0.2s;
			width: 100%;
			background: #fff;
		}

		.mout {
			top: -2.8125rem;
		}
	}

	.search {
		position: fixed;
		top: 0;
		width: 100%;

		.back {
			width: 2.8125rem;

			i {
				line-height: 2.8125rem;
				font-size: 1.5rem;
			}
		}

		overflow: hidden;
		background: #fff;
		border-bottom: 0.0625rem solid #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;

		.mint-button.mint-button--default {
			/* float: left; */

			/* width: 10%; */
			border: none;
			padding-top: 0.4rem;
			box-shadow: none;
		}

		.searchBox {
			position: relative;
			font-size: 14px;
			display: inline-table;
			float: left;
			width: 70%;
			// margin-left: -1.5rem;
			height: 1.875rem;
			background: #f2f2f2;
			border-radius: 1rem;

			input {
				vertical-align: middle;
				border: none;
				box-sizing: border-box;
				outline: 0;
				padding: 0 1rem;
				height: 1.875rem;
				line-height: 1.875rem;
				color: #8c8c8c;
				font-size: 14px;
				width: 14rem;
				border-radius: 0.9375rem;
				z-index: 10;

				/* margin-left: 2rem; */
			}
		}

		.search_bth {
			width: 3.75rem;
			height: 2.8125rem;
			line-height: 2.8125rem;

			span {
				font-size: 16px;
				color: #333;
			}
		}

		.search_icon {
			position: absolute;
			left: 3.75rem;
			height: 2.8125rem;

			i {
				line-height: 2.8125rem;
				color: #999;
				font-size: 1rem;
			}
		}
	}

	.sort_box {
		height: 2.5rem;
		line-height: 2.5rem;
		display: flex;
		background: #fff;
		border-top: solid 0.0625rem #ebebeb;
		border-bottom: solid 0.0625rem #ebebeb;

		.sort_a,
		.sort_b,
		.sort_c {
			width: 6.9787rem;
			display: flex;
			justify-content: center;
			position: relative;
			font-size: 15px;

			li {
				display: flex;

				i {
					font-size: 12px;
					margin-left: 0.375rem;
					color: #999;
				}

				.icon-up {
					margin-top: -0.1875rem;
				}

				.icon-down {
					position: absolute;
					right: 2rem;
					top: 0.25rem;
				}
			}
		}

		.sort_icon {
			width: 2.5rem;
			height: 2.5rem;

			i {
				font-size: 1.5rem;
				color: #666;
			}
		}

		.hascolor {
			color: #f15353 !important;
		}
	}
</style>
